<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .rightcontext {
      display: flex;
      width: 3760px;
      height: 360px;
      margin-top: 6px;
      flex-wrap: nowrap;
      position: absolute;
      background-color: #2E8FFF;
      left: -940px;
      /* background-color: bisque */
    }

    .carousel-box {
      position: absolute;
      width: 940px;
      display: flex;
      justify-content: space-around;
      text-align: center;
    }

    .carousel:hover {
      border-color: transparent;
      box-shadow: 0 2px 4px #0000001f, 0 0 6px #0000000a;
    }

    .carousel {
      width: 164px;
      height: 232px;
      padding: 36px 8px;
      position: relative;
      /* box-sizing: border-box; */
      /* background-color: grey; */
    }

    .carousel:hover .carousel-img {
      width: 156px;
      height: 156px;
      transform: scale(1.05);
      transition-duration: .3s;
      display: inline-block;
      margin-bottom: 20px;
      vertical-align: middle;
      max-width: 100%;
    }

    .carousel-img {
      width: 156px;
      height: 156px;
      max-width: 100%;
      cursor: pointer;
      border: none;
      vertical-align: middle;
      transition-duration: .3s;
      display: inline-block;
      margin-bottom: 20px;
    }

    .carousel-p {
      overflow: hidden;
      display: block;
      font-size: 12px;
      color: rgb(71 70 70);
    }

    .carousel-span1 {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: rgb(153 153 153);
    }

    .carousel-span2 {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: rgb(247 145 25);
    }

    .carousel:hover .carousel-icon {
      position: absolute;
      width: 31px;
      height: 41px;
      top: 36px;
      left: 12px;
      transform: scale(1.2);
      transition-duration: .3s;
      display: inline-block;
      vertical-align: middle;
      max-width: 100%;
    }

    .carousel-icon {
      position: absolute;
      width: 31px;
      height: 41px;
      top: 36px;
      left: 12px;
      transition-duration: .3s;
    }
  </style>
</head>

<body>
  <div class="rightcontext">
    <ul class="carousel-box">
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">第一个电子元器件1</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">电子元器件</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">电子元器件</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">电子元器件</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">电子元器件</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
    </ul>
    <ul class="carousel-box">
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">第二个电子元器件22</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">电子元器件</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">电子元器件</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">电子元器件</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">电子元器件</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
    </ul>
    <ul class="carousel-box">
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">第三个电子元器件333</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">电子元器件</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">电子元器件</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">电子元器件</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
      <li class="carousel">
        <img class="carousel-img" src="images/pinkblue.jpg" alt="" />
        <p class="carousel-p">BCV27</p>
        <span class="carousel-span1">电子元器件</span>
        <span class="carousel-span2">￥0.288150</span>
        <img class="carousel-icon" src="images/youzhihuoyuan-icon.png" alt="" />
      </li>
    </ul>
    <div class="xiaoanniu">
      <div class="xiaoanniuelem"></div>
    </div>
  </div>
</body>

</html>